/*
 * @Description:消息框
 * @Author: LiuYan
 * @Date: 2022-04-23 11:54:57
 * @LastEditTime: 2023-01-07 11:17:14
 * @LastEditors: LiuYan
 * @Reference:
 */
/**
 * @description:
 * @param {*} ms 多少秒关闭消息框  默认4000
 * @param {*} type 消息类型  默认 success。可选值：success、info、warn、error
 * @param {*} msg  消息内容  默认 这是一条测试数据。
 * 可选值：可以传入任意html标签，例如 `<div color="red">这是一条测试数据</div>`
 * @param {*} animeType 动画类型 zoom slide
 * @param {*} location  定位显示位置 默认 top-center 。可选值：top-center、top-left、top-right、
 * bottom-center、bottom-left、bottom-right、center-center、center-left、center-right
 */

let doc = null;
let win = null;
export default function message({
  ms = 2000,
  type = "success",
  msg = "这是一条测试数据",
  animeType = "zoom",
  location = "center-center",
}) {
  const messageWrapper = document.getElementById("yik-message-wrapper");
  const message = document.createElement("div");
  message.className =
    "yik-message yik-message_" + animeType + " " + "yik-message_" + type;
  customStyle({ message, type });
  message.innerHTML = msg;
  // let img = new Image();
  // message.appendChild(img);
  // img.onclick = () => {
  //   closeMsg(message, animeType, type);
  // };
  // 如果移入不能自动关闭
  // message.onmouseover = function () {
  //   img.className = "yik-message-close";
  //   img.src = import("../img/message/close.png");
  //   clearTimeout(clearTime);
  // };
  // 如果移出重新开启自动关闭
  // message.onmouseout = function () {
  //   img.className = "";
  //   img.src = "";
  //   autoClose();
  // };
  // 判断是否存在消息框容器
  if (messageWrapper) {
    messageWrapper.appendChild(message, null);
  } else {
    // 创建要给消息框添加的dom元素
    const messageWrapper = document.createElement("div");
    messageWrapper.id = "yik-message-wrapper";
    messageWrapper.className = "yik-message-" + location;
    messageWrapper.appendChild(message, null);
    recurveParent(window);
    doc.body.appendChild(messageWrapper);
  }
  // 自动关闭消息框
  function autoClose() {
    win.setTimeout(
      function () {
        closeMsg(message, animeType, type);
      }.bind(this),
      ms
    );
  }
  autoClose();
}
const style = {
  color: "", // 颜色
  bg: "", // 背景
};
/**
 * @description: 用户自定义样式
 */
function customStyle({ message, type }) {
  Object.keys(style).forEach((key) => {
    // 判断是否查找到类型消息
    if (message.style[type]) {
      let _key = key;
      let _value = "";
      if (message.style[type][key]) {
        if (key == "bg") {
          _key = "background";
          message.style["boxShadow"] =
            "1px 1px 15px " +
            colorTransform(message.style[type][key], 0.5) +
            "";
        }
        _value
          ? (message.style[_key] = _value)
          : (message.style[_key] = message.style[type][key]);
      }
    }
  });
}
function recurveParent(next) {
  if (!next.document.getElementById("root")) {
    recurveParent(next.parent);
  } else {
    doc = next.document;
    win = next;
  }
}
message.style = {
  success: {
    ...style,
  },
  info: {
    ...style,
  },
  warn: {
    ...style,
  },
  error: {
    ...style,
  },
};
/**
 * @description: 关闭消息框
 * @param {*} message 消息对象
 * @param {*} animeType 动画类型
 * @param {*} type 消息类型样式
 */
function closeMsg(message, animeType, type) {
  message.className =
    "yik-message yik-message_close-" + animeType + " " + "yik-message_" + type;
  getAnimationDuration(function (ms) {
    win.setTimeout(function () {
      message.remove();
    }, ms - 50);
  }, message);
}
// 获取css上的动画时间
function getAnimationDuration(callback, dom) {
  const style = window.getComputedStyle(dom);
  const duration = style.animationDuration || style.transitionDuration;
  const seconds = parseFloat(duration) * 1000;
  callback(Number.isNaN(seconds) ? 0 : seconds);
}
/**
 * @description: 将16进制颜色转为RGBA
 * @param {*} sHex
 * @param {*} alpha
 * @return {*}
 */
function colorTransform(sHex, alpha = 1) {
  let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
  /* 16进制颜色转为RGB格式 */
  let sColor = sHex.toLowerCase();
  if (sColor && reg.test(sColor)) {
    if (sColor.length === 4) {
      let sColorNew = "#";
      for (let i = 1; i < 4; i += 1) {
        sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
      }
      sColor = sColorNew;
    }
    //  处理六位的颜色值
    let sColorChange = [];
    for (let i = 1; i < 7; i += 2) {
      // eslint-disable-next-line radix
      sColorChange.push(parseInt(`0x${sColor.slice(i, i + 2)}`));
    }
    return `rgba(${sColorChange.join(",")},${alpha})`;
  }
  return sColor;
}
